<template>
    <div>
{{ todoId }} <br>
{{ data }}
    </div>
</template>

<script setup>
import { ref, reactive, watch,watchEffect } from 'vue'
const todoId = ref(1)
const data = ref(null)

// watch(todoId, async () => {
//   const response = await fetch(
//     `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
//   )
//   data.value = await response.json()
// }, { immediate: true })

watchEffect(async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
})
</script>

<style  scoped>

</style>